<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">

<title>素材火www.sucaihuo.com - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
  content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link href="css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
  rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=2.2.0" rel="stylesheet">
</head>

<body class="top-navigation">
  
    <div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
      <div class="row border-bottom">
        <nav class="navbar navbar-static-top" data-role="navigation" style="margin-bottom:0">
          <div class="navbar-header">
            <div class="minimalize-styl-2">
         
              
                  <a class="btn btn-success" title="返回主页" href="main.html"><i class="fa fa-lg fa-home"></i></a>
              <a class="back-link btn btn-success" title="后退"><i class="fa fa-lg fa-arrow-left"></i></a>
              <a class="reload-link btn btn-success" title="重新加载"><i class="fa fa-lg fa-repeat"></i></a>
              <!-- 配置点1 -->
              <!-- 上下文导航 -->
              <ol id="guide" class="breadcrumb m-l">
                <li><a>配送中心管理</a></li>
                <li><a>进货管理</a></li> 
                <li><strong>供应商管理</strong></li>
              </ol>
              
              
            </div>
          </div>
         <div class="nav navbar-top-links navbar-right minimalize-styl-2">
            <span class="m-r-sm text-muted welcome-message btn btn-link">欢迎使用Feces物流管理系统</span>
          </div>
        </nav>
      </div>
      
      
      <!-- 配置点2 -->
      <!-- 内容 -->
      <div class="wrapper wrapper-content animated fadeInRight">
      
 
  <div class="row">
          <div class="col-lg-12">
            <div class="ibox float-e-margins">
              <div class="ibox-title">
                <button type="button"class="btn btn-primary btn-xm" onclick="doGet();">查询供应商信息</button>
                <div class="ibox-tools">
                  <a class="collapse-link btn-link">
                    收起/展开<i class="fa fa-chevron-up"></i>
                  </a>
                </div>
              </div>
              <div class="ibox-content">
                   <table class="table table-striped table-bordered table-hover "id="editable">
                <thead>
                  <tr>
                      <th>#</th>
                                            <th>供应商名称</th>
                                            <th>供应商地址</th>
                                            <th>联系人</th>
                                            <th>联系电话</th>
                                            <th>开户行</th>
                                            <th>银行账号</th>
                                            <th>传真</th>
                                            <th>邮编</th>
                                            <th>法人</th>
                                            <th>备注</th>
                  </tr>
                </thead>
                <tbody>
                  
                </tbody>
              </table>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 段落2 -->
        <div class="row">
          <div class="col-lg-12">
            <div class="ibox float-e-margins">
              <div class="ibox-title">
                <button type="button" onclick="addSupplier();" class="btn btn-primary btn-xm">添加供应商</button>
                <div class="ibox-tools">
                  <a class="collapse-link btn-link">
                    收起/展开<i class="fa fa-chevron-up"></i>
                  </a>
                </div>
              </div>
              <div class="ibox-content">
                 <form class="m-t" data-role="form">
                      <div class="form-group">
                        <label class="label label-info">供应商名称</label>
                        <input type="text" class="form-control" id="in_name" placeholder="请输入供应商名称" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">供应商地址</label>
                        <input type="text" class="form-control" id="in_address" placeholder="请输入供应商地址" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">联系人</label>
                        <input type="text" class="form-control" id="in_contact" placeholder="请输入联系人" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">联系电话</label>
                        <input type="text" class="form-control" id="in_contact_phone" placeholder="请输入联系电话" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">开户行</label>
                        <input type="text" class="form-control" id="in_bank" placeholder="请输入开户行" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">银行账号</label>
                        <input type="text" class="form-control" id="in_bank_account" placeholder="请输入银行账号" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">传真</label>
                        <input type="text" class="form-control" id="in_fax" placeholder="请输入传真" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">邮编</label>
                        <input type="text" class="form-control" id="in_zip" placeholder="请输入邮编" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">法人</label>
                        <input type="text" class="form-control" id="in_corporation" placeholder="请输入法人" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">备注</label>
                        <input type="text" class="form-control" id="in_remark" placeholder="请输入备注" required="">
                      </div>
                      <button type="button" onclick="addSupplier()" class="btn btn-primary block full-width m-b">添加供应商</button>
                    </form>
              </div>
            </div>
          </div>
        </div>
        


        <div class="row">
          <div class="col-lg-12">
            <div class="ibox float-e-margins">
              <div class="ibox-title">
                <h5>删除供应商</h5>
                <div class="ibox-tools">
                  <a class="collapse-link btn-link">
                    收起/展开<i class="fa fa-chevron-up"></i>
                  </a>
                </div>
              </div>
              <div class="ibox-content">
                <input type="text"id="in_id">
                <button type="button" onclick="doDelete();"class="btn btn-primary btn-xm">删除供应商信息</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 配置点2.4 -->
        <!-- 段落4 -->
        <div class="row">
          <div class="col-lg-12">
            <div class="ibox float-e-margins">
              <div class="ibox-title">
                <h5>修改供应商信息</h5>
                <div class="ibox-tools">
                  <a class="collapse-link btn-link">
                    收起/展开<i class="fa fa-chevron-up"></i>
                  </a>
                </div>
              </div>
              <div class="ibox-content">
                    <form class="m-t" data-role="form">
                      <input type="text" class="form-control" id="in_id1" required=""placeholder="请输入要修改的供应商id">
                      <button type="button" onclick="updateSupplier();" class="btn btn-primary btn-xm">修改</button>
                      <div class="form-group">
                        <label class="label label-info">供应商名称</label>
                        <input type="text" class="form-control" id="in_name1" placeholder="请输入供应商名称" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">供应商地址</label>
                        <input type="text" class="form-control" id="in_address1" placeholder="请输入供应商地址" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">联系人</label>
                        <input type="text" class="form-control" id="in_contact1" placeholder="请输入联系人" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">联系电话</label>
                        <input type="text" class="form-control" id="in_contact_phone1" placeholder="请输入联系电话" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">开户行</label>
                        <input type="text" class="form-control" id="in_bank1" placeholder="请输入开户行" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">银行账号</label>
                        <input type="text" class="form-control" id="in_bank_account1" placeholder="请输入银行账号" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">传真</label>
                        <input type="text" class="form-control" id="in_fax1" placeholder="请输入传真" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info">邮编</label>
                        <input type="text" class="form-control" id="in_zip1" placeholder="请输入邮编" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info1">法人</label>
                        <input type="text" class="form-control" id="in_corporation1" placeholder="请输入法人" required="">
                      </div>
                      <div class="form-group">
                        <label class="label label-info1">备注</label>
                        <input type="text" class="form-control" id="in_remark1" placeholder="请输入备注" required="">
                      </div>
                    </form>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
  <!-- Mainly scripts -->
  <script src="js/jquery-2.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
  <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="js/hplus.js"></script>
  <script src="js/plugins/pace/pace.min.js"></script>
  <script src="js/plugins/toastr/toastr.min.js"></script>
  <script src="js/feces.js"></script>
  <!-- Data Tables -->
  <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
  <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
  <!-- Page-Level Scripts -->
  <script>
  var url = "api/suppliers";
  var url_0="api/supplier";
    // $(document).ready(function() {
    //   $('.dataTables-example').dataTable();

    //   /* Init DataTables */
    //   var oTable = $('#editable').dataTable();

    //   /* Apply the jEditable handlers to the table */
    //   oTable.$('td').editable('../example_ajax.php', {
    //     "callback" : function(sValue, y) {
    //       var aPos = oTable.fnGetPosition(this);
    //       oTable.fnUpdate(sValue, aPos[0], aPos[1]);
    //     },
    //     "submitdata" : function(value, settings) {
    //       return {
    //         "row_id" : this.parentNode.getAttribute('id'),
    //         "column" : oTable.fnGetPosition(this)[2]
    //       };
    //     },

    //     "width" : "90%",
    //     "height" : "100%"
    //   });

    // });
    function doGet() {
    $.ajax({
      type: "GET",
      url: url,
      success: function(result){

      var rs = result.data;
      var cll=rs;
      var lg=cll.length;
      for(var i=0;i<lg;i++)
      {
        var cl=cll[i];
        $('#editable').dataTable()
          .fnAddData(
            [ cl.id, cl.name,cl.address,cl.contact, cl.contactPhone, 
                cl.bank,cl.bankAccount,cl.fax,cl.zip,cl.corporation,cl.remark ]);
        }
      }

      });
      
    }
    function doDelete() {
      var id = $("#in_id").val();
    $.ajax({
      type: "DELETE",
      url: url_0,
      data :{
        id : id,
      },
      success: function(result){
      }
      });
    }
    function addSupplier()
  {
    var name=$("#in_name").val();
    var address=$("#in_address").val();
    var contact=$("#in_contact").val();
    var contact_phone=$("#in_contact_phone").val();
    var bank=$("#in_bank").val();
    var bank_account=$("#in_bank_account").val();
    var fax=$("#in_fax").val();
    var zip=$("#in_zip").val();
    var corporation=$("#in_corporation").val();
    var remark=$("#in_remark").val();
    $.ajax({
      type: "post",
      url: url_0,
      data: {
        name    : name,
        address  : address,
        contact : contact,
        contact_phone : contact_phone,
        bank : bank,
        bank_account : bank_account,
        fax : fax,
        zip : zip,
        corporation : corporation,
        remark : remark,
      },
      success: function(result){
        
      }
    });
    
  } 
  function updateSupplier()
  {
    var id =$("#in_id1").val();
    var name=$("#in_name1").val();
    var address=$("#in_address1").val();
    var contact=$("#in_contact1").val();
    var contact_phone=$("#in_contact_phone1").val();
    var bank=$("#in_bank1").val();
    var bank_account=$("#in_bank_account1").val();
    var fax=$("#in_fax1").val();
    var zip=$("#in_zip1").val();
    var corporation=$("#in_corporation1").val();
    var remark=$("#in_remark1").val();
    $.ajax({
      type: "put",
      url: url_0,
      data: {
        id : id,
        name    : name,
        address  : address,
        contact : contact,
        contact_phone : contact_phone,
        bank : bank,
        bank_account : bank_account,
        fax : fax,
        zip : zip,
        corporation : corporation,
        remark : remark,
      },
      success: function(result){
        
      }
    });
    
  } 
    </script>
  <script type="text/javascript"
    src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
  <!--统计代码，可删除-->

</body>

</html>
